<template>
  <div style="height: 100vh;">

    <!--头部-->
    <van-nav-bar
        :title="university.name"
        left-text="返回"
        left-arrow
        @click-left="backBtn"
    />

    <!--导航-->
    <div>
      <van-tabs
          animated
          color="#1989fa"
          v-model="active"
      >
        <van-tab title="简介" style="overflow-y: scroll;overflow-x: hidden">
          <!--排名-->
          <div>
            <van-cell-group inset>
              <van-cell :value="`NO.${university.sort}`" style="background-color: #ddd;margin-top: 10px">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <van-tag color="orange">排名</van-tag>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
          <!--基本信息-->
          <div class="middle">
            <h5>基本信息</h5>
            <div class="basicInfo">
              <div class="infoItem" v-for="(item,index) in infoItemList" :key="index">
                <div style="text-align: center;color:#aaa">{{ item.name }}</div>
                <div style="text-align: center">{{ item.value }}</div>
              </div>
            </div>
          </div>
          <van-divider
              :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px' }"
          />
          <!--男女比例-->
          <div class="sexRate">
            <h5>男女比例</h5>
            <div class="rate">
              <van-progress class="sexM" :pivot-text="`男生-${sexRate}%`" stroke-width="8" :percentage="sexRate"
                            v-if="!isNaN(parseInt(sexRate))"/>
              <van-progress class="sexF" :pivot-text="`女生-${100-sexRate}%`" color="#fc5531" pivot-color="#fc5531"
                            stroke-width="8"
                            :percentage="100-sexRate" v-if="!isNaN(parseInt(sexRate))"/>
            </div>
          </div>
          <van-divider
              :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px','margin-top':'23px' }"
          />
          <!--就业信息-->
          <div class="getJob">
            <h5>就业</h5>
            <div class="rate">
              <div class="getJobRate">
                <van-circle v-model="currentJobRate" :rate="university.getJobRate" :speed="100" :text="jobText"
                            :stroke-width="95"
                            size="70px" layer-color="#ddd"/>
                <span>就业率</span>
              </div>
              <div class="getJobRate">
                <van-circle v-model="currentFurRate" :rate="67.4" :speed="100" :text="furText" :stroke-width="95"
                            size="70px" layer-color="#ddd" color="#07c160"/>
                <span>深造率</span>
              </div>
              <div class="getJobRate">
                <van-circle v-model="currentStartRate" :rate="0.43" :speed="100" :text="startText" :stroke-width="95"
                            size="70px" layer-color="#ddd" color="orange"/>
                <span>创业率</span>
              </div>
            </div>
          </div>
          <!--底部信息-->
          <div class="footer">
            <van-button color="DarkOrange" @click="toOffWeb">学校官网</van-button>
            <van-button type="info" @click="toAdmWeb">招生官网</van-button>
          </div>

        </van-tab>
        <van-tab title="开设专业">
          <UniversityMajor :majorList="university.majorList"/>
        </van-tab>
        <van-tab title="学校描述">
          <div class="description">
            {{ university.description }}
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import UniversityMajor from "@/components/UniversityMajor";

export default {
  name: "UniversityDetail",
  components: {UniversityMajor},
  props: ['uniId', 'status', 'uniName'],
  data() {
    return {
      university: {},
      active: 0,
      browseTime: 0,  // 浏览时长初始值为 0
      timer: null,
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      infoItemList: [],
      currentJobRate: 0,
      currentFurRate: 0,
      currentStartRate: 0
    }
  },
  methods: {

    //去研究生官网
    toAdmWeb(){
      this.$router.push({
        name:'UniversityAdmission',
        params:{
          name:this.university.name,
          adm:this.university.admissionWebsite
        }
      })
    },

    //去学校官网
    toOffWeb(){
      this.$router.push({
        name:'UniversityOfficial',
        params:{
          name:this.university.name,
          off:this.university.officialWebsite
        }
      })
    },
    //定时器
    setTime() {
      //设置定时器
      this.timer = setInterval(() => {
        this.browseTime++;
        console.log("停留时长", this.browseTime);
      }, 1000);
    },
    backBtn() {
      this.$router.back()
    },
    fillInfoItemList(nameList, valueList) {
      for (let i = 0; i < 5; i++) {
        let obj = {
          name: nameList[i],
          value: this.university[valueList[i]]
        }
        this.infoItemList.push(obj)
      }
    },
    //处理比例问题
    handleRate() {
      this.university.getJobRate = this.university.getJobRate * 100
      this.university.furtherStudyRate = this.university.furtherStudyRate * 100
      this.university.startUpRate = this.university.startUpRate * 100
    }
  },
  created() {
    const nameList = ['类别', '级别', '地区', '类型', '排名']
    const valueList = ['teacCharacter', 'level', 'regionName', 'typeName', 'sort']
    if (this.status === 1) { //根据id查询详细信息
      this.request.get('/api/university/selectByIdForDetail', {
        params: {
          id: this.uniId
        }
      }).then(res => {
        if (res.code === 1) {
          this.university = res.data
          //给infoItemList赋值
          this.fillInfoItemList(nameList, valueList)
          this.handleRate()
        }
      })
    } else {
      //根据名称查询院校详细信息
      this.request.get('/api/university/selectByNameForDetail', {
        params: {
          name: this.uniName
        }
      }).then(res => {
        if (res.code === 1) {
          this.university = res.data
          //给infoItemList赋值
          this.fillInfoItemList(nameList, valueList)
          this.handleRate()
        }
      })
    }

  },
  computed: {
    sexRate() {
      return this.university.maleRate * 100
    },
    jobText() {
      return this.currentJobRate + '%';
    },
    furText() {
      return this.currentFurRate + '%';
    },
    startText() {
      return this.currentStartRate + '%';
    },
  },
  mounted() {
    this.setTime()
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer)
    //发送请求保存
    console.log('停留总时长',this.browseTime)
    //universityId--routeId
    //userId
    //browseTime -- stayTime
    const pageVo = {
      routeId:this.university.id,
      userId:this.user.id,
      stayTime:this.browseTime
    }
    this.request.post('/api/page/savePage',pageVo).then(res => {
      if (res.code === 1){
        console.log(res.data)
      }
    })
  }

}
</script>

<style lang="less" scoped>
.description {
  width: 90%;
  //height: 200px;
  border: 1px solid #ddd;
  margin: 20px auto;
  border-radius: 5px;
  color: #1989fa;
}

.footer {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.getJob {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  margin-left: 10%;

  h5 {
    margin-top: 10px;
  }

  .rate {
    display: flex;
    flex-direction: row;

    .getJobRate {
      height: 100px;
      display: flex;
      flex-direction: column;
      margin-left: 5%;

      span {
        margin: 4%;
      }
    }
  }
}

.sexRate {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  h5 {
    margin: 10px 10%;
  }

  .rate {
    width: 80%;
    margin: 0 auto;
  }

  .sexM {
    margin-top: 10px;
  }

  .sexF {
    margin-top: 25px;
  }
}

.middle {
  display: flex;
  flex-direction: column;
  margin-left: 10%;

  h5 {
    margin-bottom: 3%;
  }

  .basicInfo {
    width: 85%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;

    .infoItem {
      font-size: 8px;
    }
  }
}

</style>